<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<base href="<%=basePath%>">
    
    <title>首页</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" href="/blog4/css/main.css" type="text/css"/>
 	<script type="text/javascript" src="/blog4/js/jquery-1.3.1.js"></script>
 	<script type="text/javascript" src="/blog4/js/main.js"></script>
 	<!-- <script type="text/javascript" src="/blog4/js/main.js"></script> -->
 </head>
  <body>
  	<jsp:include page="/WEB-INF/jsp/head.jsp"></jsp:include>
  	<div class="main">
		<!-- 文章列表 -->
		<div class="post_list">
			<c:forEach items="${articleList }" var="article" begin="0">
			
			<!-- 文章主体 -->
			<div class="post_item" data-id="${article.articleId }" >
				<div class="item_left">
					<c:if test="${article.user.userHeader != null }">
						<img id="userhead" src="${article.user.userHeader }">
					</c:if>
					<c:if test="${article.user.userHeader == null }">
						<img id="userhead" alt="jflk" src="${pageContext.request.contextPath }/images/default1.jpg">
					</c:if>
					<!-- <img alt="fd" src="/images/1488247824466.jpg">
					 -->
				</div>
				<!-- 文章主体结构 -->
				<div class="post_item_body">
					<div class="post_item_source">
					来自话题：${article.category.categoryName  }
					</div>
				<!-- 文章名 -->
					<h3><a class="title" href="${pageContext.request.contextPath }/article/getArticleItem?articleId=${article.articleId }">${article.articleTitle }</a></h3>
					<!-- 文章描述 -->
					<div class="post_item_summary">
						<p id="content${article.articleId }" class="articleContent">${article.articleContent}</p>
					</div>
					<!-- 底栏 -->
					<div class="post_item_foot">
						<div class="comment_item">
							<a id = "userHearder" href="##">${article.user.userName}</a>
							<span>发布于<fmt:formatDate value="${article.articleDate }" pattern="yy-MM-dd HH:mm:ss"/></span>
							<button class="comment" id="comment${article.articleId }" data-id="${article.articleId }" >
								<span class="comment-span" data-id="${article.articleId }">回复${fn:length(article.comments)}</span></button>
							<button class="packUp" id="packUp${article.articleId }" data-id="${article.articleId }" ><span>收起</span></button>
							<!-- 使用jstl标签取得articleContent的长度，判断大于190字符的记录，显示阅读全文标签 -->
							<c:if test="${fn:length(article.articleContent)>195}">
							<button id="read${article.articleId }" class="read" data-id="${article.articleId }">
								<span >阅读全文</span>
							</button></c:if>
						</div>
						<!-- 显示评论记录 -->
						<div class="commentList" id="list${article.articleId }" >
							<table id="listTable${article.articleId }" >
								
							</table>
						</div>
						<!-- 显示评论框 -->
						<div id="commentform${article.articleId }" class="comment-form" >
								<table>
								<tr><td><input id="commentContent${article.articleId }" class="commentInput" data-id="${article.articleId }" type="text" name="commentContent" placeholder="请说点什么..."></td>
								<td><input class="ajaxSubmit" data-id="${article.articleId }" data_user_id="${sessionScope.user.userId }" type="submit"></td></tr>
								</table>
						</div>
					</div>
				</div>
				<!--<div class="clear"><hr/></div>  -->
			</div>
			</c:forEach>
		</div>
		<div class="paging">
			<c:forEach  var="i" begin="1" end="${pageCount}">
   				<a href="${pageContext.request.contextPath}/article/showArticleByPage?pageNow=${i }">${i }</a>
   			</c:forEach>
		</div>
	</div>
  </body>
</html>
